<template>
  <div>
    <ComDialog
      width="800px"
      @EventClose="closeFn"
      title="新增充值金额"
      :dialogVisible="dialogVisible"
    >
      <el-form ref="form" :rules="rules" label-width="100px" :model="formData">
        <el-form-item label="充值金额" prop="amount">
          <el-input
            v-model.number="formData.amount"
            placeholder="最大6位数"
          ></el-input>
        </el-form-item>
        <el-form-item label="赠送卡券">
          <div class="box">
            <el-input
              class="input"
              placeholder="请输入搜索条件"
              @input="queryCouponFn"
              v-model="query"
              clearable
            >
              <template slot="prepend">
                <span class="el-icon-search"></span>
              </template>
            </el-input>

            <el-select
              v-model="formData.couponIds"
              multiple
              placeholder="请选择"
            >
              <el-option
                v-for="(item, index) in options"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <ul class="showBox">
            <li
              @click="selectCouponFn($event, item)"
              v-for="(item, index) in ShowOptions"
              :key="index"
            >
              <span>
                {{ item.label }}
              </span>
              <span
                class="el-icon-circle-close"
                @click="removeItemFn(item, index)"
              ></span>
            </li>
          </ul>
        </el-form-item>
        <el-form-item>
          <el-radio v-model="formData.status" label="1">关闭</el-radio>
          <el-radio v-model="formData.status" label="0">正常</el-radio>
        </el-form-item>
      </el-form>

      <template name="footer">
        <el-button @click="closeFn">取消</el-button>
        <el-button
          type="primary"
          @click="saveFn"
          v-hasPermi="['market:depositPresent:edit']"
          >保存</el-button
        >
      </template>
    </ComDialog>
  </div>
</template>

<script>
import ComDialog from "../../../components/comDialog.vue";
import { getCouponListApi } from "@/wss/api/systemManagement/Cvm/settting.js";
import { getDepositPresentGetInfoApi } from "@//wss/api/financial/Recharge/depositPresent.js";
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  components: { ComDialog },
  data() {
    return {
      formData: { amount: "", status: "", couponIds: [] },
      // 意见列表
      options: [],
      //搜索
      query: "",
      // 搜索时，使用到的列表
      ShowOptions: [],
      rules: {
        amount: [
          {
            type: "number",
            required: true,
            message: "无效",
            trigger: "blur",
            max: 999999,
          },
        ],
      },
    };
  },
  created() {
    // 获取意见列表
    this.getCouponListFn();
  },
  methods: {
    // 保存
    async saveFn() {
      try {
        await this.$refs.form.validate();
        this.formData.couponIds = this.formData.couponIds.map((item) => {
          return { id: item };
        });

        let data = JSON.parse(JSON.stringify(this.formData));
        data.amount = data.amount.toFixed(2);
        this.$emit("EventParams", data);
        this.closeFn();
      } catch (error) {
        this.$modal.msgError(error);
      }
    },
    // 根据id获取详细
    async getDetaiFn(row) {
      let { data, code } = await getDepositPresentGetInfoApi({ id: row.idStr });
      if (code == 200) {
        this.formData = JSON.parse(JSON.stringify(data));
        this.formData.couponIds = [];
        data.couponIds.forEach((item) => {
          this.formData.couponIds.push(item.idStr);
        });
      }
    },

    // 去除用户点击的某一个优惠券
    removeItemFn(item, index) {
      this.ShowOptions.splice(index, 1);
    },
    // 选择筛选优惠券
    selectCouponFn(e, item) {
      // 如果是关闭搜索优惠券就退出
      if (e.target.className == "el-icon-circle-close") {
        return "";
      }
      let current = this.options.find((v) => {
        return v.value == item.value;
      });
      // 没有包含再添加
      if (!this.formData.couponIds.includes(current.value)) {
        this.formData.couponIds.push(current.value); // 赋值到选择框
      }

      this.ShowOptions = [];
      this.query = "";
    },
    // 输入查询
    queryCouponFn(val) {
      this.ShowOptions = [];
      this.ShowOptions = this.options.filter((item) => {
        return new RegExp(val).test(item.label);
      });

      if (!val) {
        this.ShowOptions = []; // 如果输入的是空直接清空
      }
    },
    async getCouponListFn() {
      let { rows, code } = await getCouponListApi();
      if (code == 200) {
        rows.forEach((item) => {
          this.options.push({
            label: `满${item.symk}减${item.amount}`,
            value: item.idStr,
          });
        });
      }
    },
    // 关闭对话框
    closeFn() {
      this.$emit("update:dialogVisible", false);
      this.formData = { amount: "", status: "", couponIds: [] };
      this.query = "";

      this.$refs.form.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  .input {
    width: 460px;
    margin-right: 40px;
    height: 30px;
  }
}
.showBox {
  display: flex;

  margin-left: -53px;

  li {
    cursor: pointer;

    list-style: none;
    padding: 1;
    height: 30px;
    margin: 0px 10px;
    background-color: #d7d7d7;
    text-align: center;
    line-height: 30px;
  }
}
</style>